﻿

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="../static/layui/css/layui.css">
<link rel="stylesheet" href="../static/css/global.css" media="all" />
<link rel="stylesheet" href="../static/css/font-awesome/css/font-awesome.css" media="all" />
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">layui 后台布局</div>
			<div class="admin-side-toggle">
				<i class="fa fa-bars" aria-hidden="true"></i>
			</div>

			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">基本资料</a>
						</dd>
						<dd>
							<a href="">安全设置</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="">退了</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black" id="admin-side">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">所有商品</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;">列表一</a>
							</dd>
							<dd>
								<a href="javascript:;">列表二</a>
							</dd>
							<dd>
								<a href="javascript:;">列表三</a>
							</dd>
							<dd>
								<a href="">超链接</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;">列表一</a>
							</dd>
							<dd>
								<a href="javascript:;">列表二</a>
							</dd>
							<dd>
								<a href="">超链接</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="">云市场</a></li>
					<li class="layui-nav-item"><a href="">发布商品</a></li>
				</ul>
			</div>
		</div>

		<!-- 右侧内容 -->
		<div class="layui-body layui-form" id="admin-body">
			<div class="layui-tab marg0" lay-filter="bodyTab">
				<ul class="layui-tab-title top_tab">
					<li class="layui-this" lay-id=""><i class="iconfont icon-computer"></i> <cite>后台首页</cite></li>
				</ul>
				<div class="layui-tab-content clildFrame">
					<div class="layui-tab-item layui-show">
						<iframe src="page/main.html"></iframe>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-footer" id="admin-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
	<script src="../static/layui/layui.js"></script>
	<script src="../static/js/jquery-2.1.1.min.js"></script>
	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		//toggle左侧菜单  
		$('.admin-side-toggle').on('click', function() {
			debugger;
			var sideWidth = $('#admin-side').width();
			if (sideWidth === 200) {
				$('#admin-body').animate({
					left : '0'
				});
				$('#admin-footer').animate({
					left : '0'
				});
				$('#admin-side').animate({
					width : '0'
				});
			} else {
				$('#admin-body').animate({
					left : '200px'
				});
				$('#admin-footer').animate({
					left : '200px'
				});
				$('#admin-side').animate({
					width : '200px'
				});
			}
		});

		//手机设备的简单适配
		var treeMobile = $('.site-tree-mobile'), shadeMobile = $('.site-mobile-shade');
		treeMobile.on('click', function() {
			$('body').addClass('site-mobile');
		});
		shadeMobile.on('click', function() {
			$('body').removeClass('site-mobile');
		});
	</script>
</body>
</html>
